<!doctype html>
<html>

<head>
	<meta charset="utf-8">
	<title></title>
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<link rel="stylesheet" type="text/css" href="../../../css/mui.min.css" />
	<link rel="stylesheet" type="text/css" href="../../../css/pages/user/myCar.css" />
</head>

<body>
	<div class="loading-warpper" id="loading">
		<div class="loading">
			<div class="item1"></div>
			<div class="item2"></div>
		</div>
	</div>
	<div id="app">
		<header class="mui-bar mui-bar-nav">
			<!-- <div id="header"></div> -->
			<div class="header">
				<a class="mui-action-back mui-icon mui-icon mui-icon-arrowleft"></a>
				<h1 class="mui-title">我的车辆</h1>
				<div class="mui-right" @click="addCarTap">添加车辆</div>
			</div>
		</header>
		<div class="mui-content">
			<div id="body">
				<ul class="mui-table-view" v-if="list.length > 0">
					<li class="mui-table-view-cell" v-for="item in list">
						<div class="mui-slider-right mui-disabled">
							<a v-if="item.vehmDefault==0" class="mui-btn mui-btn-grey" @click="defaultTap(item)">默认</a>
							<a class="mui-btn mui-btn-yellow" @click="modificationTap(item)">修改</a>
							<a class="mui-btn mui-btn-red" @click="deleteTap(item)">删除</a>
						</div>
						<div class="mui-slider-handle">
							<div v-if="item.vehmDefault==1" class="mui-mo">默</div>
							<div>
								<div class="font-16 font-c-7f" v-text="item.vehmName"></div>
								<div class="font-14 font-c-min mui-pai" >
									<img src="../../../images/user/pai.png" >
									<span v-text="item.vehmNumberPlate"></span>
								</div>
							</div>
						</div>
					</li>
				</ul>
				<div v-if="list.length == 0" class="font-14 font-c-ad p-30" style="text-align: center;">-- 暂无车辆信息请先添加 --</div>
			</div>
		</div>
	</div>
	<script src="../../../js/mui.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../../js/Width.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../../js/vue.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../../js/Util.js" type="text/javascript" charset="utf-8"></script>
	<script src="https://cdn.bootcss.com/fastclick/1.0.6/fastclick.min.js"></script>
	<script type="text/javascript">
		mui.init()
		mui.plusReady(function () {
			if (!mui.os.android) {
				FastClick.attach(document.body);
			}
			// Util.StatusbarHeight('header')
			// Util.StatusbarHeight('body')
			GetVehicleManagement() // 获取车辆列表
		})

		window.addEventListener('issueBack', function (msg) {
			//自定义方法，刷新数据，不刷新页面
			GetVehicleManagement() // 获取车辆列表
		})
		
		var app = new Vue({
			el: '#app',
			data: {
				list: []
			},
			methods: {
				addCarTap: function () {
					mui.openWindow({
						url: "addCar.html",
						id: "addCar",
						styles: { // 窗口参数 参考5+规范中的WebviewStyle,也就是说WebviewStyle下的参数都可以在此设置
							titleNView: { // 窗口的标题栏控件
								titleText: "添加车辆", // 标题栏文字,当不设置此属性时，默认加载当前页面的标题，并自动更新页面的标题         // 字体颜色,颜色值格式为"#RRGGBB",默认值为"#000000"
								titleSize: "17px", // 字体大小,默认17px
								backgroundColor: "#ffffff", // 控件背景颜色,颜色值格式为"#RRGGBB",默认值为"#F7F7F7"
								autoBackButton: true
							}
						},
						waiting: {
							autoShow: false
						}
					})
				},
				modificationTap: function (item) {
					mui.openWindow({
						url: "addCar.html",
						id: "addCar",
						styles: { // 窗口参数 参考5+规范中的WebviewStyle,也就是说WebviewStyle下的参数都可以在此设置
							titleNView: { // 窗口的标题栏控件
								titleText: "添加车辆", // 标题栏文字,当不设置此属性时，默认加载当前页面的标题，并自动更新页面的标题         // 字体颜色,颜色值格式为"#RRGGBB",默认值为"#000000"
								titleSize: "17px", // 字体大小,默认17px
								backgroundColor: "#ffffff", // 控件背景颜色,颜色值格式为"#RRGGBB",默认值为"#F7F7F7"
								autoBackButton: true
							}
						},
						waiting: {
							autoShow: false
						},
						extras: {
							data: {
								vehmID: item.vehmID,
								vehmNumberPlate: item.vehmNumberPlate,
								vehmName: item.vehmName,
								vehmColour: item.vehmColour
							},
						},
					})
				},
				deleteTap: function (item) {
					mui.post(Util.HTTP + 'api/VehicleManagement/DeleteVehicleManagement', {
						vehmID: item.vehmID
					}, function (res) {
						mui.toast(res.message)
						if (res.code == 1001) {
							GetVehicleManagement() // 获取车辆列表
						}
					})
				},
				defaultTap: function (item) {
					mui.post(Util.HTTP + 'api/VehicleManagement/SetDefault', {
						userID: Util.getState('$state').userID,
						vehmID: item.vehmID
					}, function (res) {
						mui.toast(res.message)
						if (res.code == 1001) {
							GetVehicleManagement() // 获取车辆列表
						}
					})
				}
			}
		})

		function GetVehicleManagement() {
			mui.post(Util.HTTP + 'api/VehicleManagement/GetVehicleManagement', {
				userID: Util.getState('$state').userID
			}, function (res) {
				if (res.code == 1001) {
					setTimeout(function () {
						document.getElementById('loading').style.display = 'none'
					}, 500)
					app.list = res.data
				} else {
					mui.toast(res.message)
				}
			})
		}
	</script>
</body>

</html>
